<template>
  <view class="flex-col justify-start relative page">
  <view class="flex-col group">
    <view class="flex-col section">
      
      <image
        class="mt-18 self-start image_4"
        src="/static/bk1.png"
      />
    </view>
    <view class="flex-col relative group_3">
      <view class="flex-col group_4">
        <view class="flex-col">
          <view class="flex-col items-center self-stretch">
            <view class="flex-col justify-start items-center image-wrapper">
              <image
                class="image_5"
                src="/static/gh/1.png"
              />
            </view>
            <text class="text_2 mt-13">更换头像</text>
          </view>
          <image
            class="mt-24 self-start image_6"
            src="/static/gh/2.png"
          />
        </view>
        <view class="flex-row justify-between relative group_5">
          <view class="flex-col group_6">
            <text class="self-end font text_3">昵称</text>
            <image
              class="mt-36 self-start image_6"
              src="/static/gh/3.png"
            />
          </view>
          <view class="flex-row self-start">
            <text class="font_2 text_4">我是mt的大大哥</text>
            <image
              class="shrink-0 image_7 ml-3"
              src="/static/gh/4.png"
            />
          </view>
          <image
            class="image_8 pos_2"
            src="/static/gh/5.png"
          />
        </view>
      </view>
      <view class="flex-col relative group_7">
        <view class="flex-row justify-between relative">
          <view class="flex-col group_8">
            <text class="self-end font text_5">生日</text>
            <image
              class="self-start image_6 mt-37"
              src="/static/gh/6.png"
            />
          </view>
          <view class="flex-row items-center self-start">
            <text class="font_3">2024-05-06</text>
            <image
              class="shrink-0 image_7 ml-3"
              src="/static/gh/7.png"
            />
          </view>
          <image
            class="image_8 pos_3"
            src="/static/gh/8.png"
          />
        </view>
        <view class="flex-col relative group_9">
          <view class="flex-row justify-between relative">
            <view class="flex-col group_10">
              <text class="self-end font text_6">ID</text>
              <image
                class="self-start image_6 mt-37"
                src="/static/gh/9.png"
              />
            </view>
            <view class="flex-row items-center self-start">
              <text class="font_3">12345652452</text>
              <image
                class="ml-2 shrink-0 image_7"
                src="/static/gh/10.png"
              />
            </view>
            <image
              class="image_8 pos_4"
              src="/static/gh/11.png"
            />
          </view>
          <view class="flex-row section_3">
            <view class="section_4"></view>
            <view class="ml-12 section_4"></view>
            <view class="ml-12 section_4"></view>
          </view>
          <view class="flex-row justify-between group_11 pos_5">
            <text class="font text_7">标签</text>
            <view class="flex-row">
              <text class="font_2">去调整</text>
              <image
                class="shrink-0 image_7"
                src="/static/gh/12.png"
              />
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="flex-col justify-start section_2 pos">
    <view class="flex-col section_5">
      <view class="flex-row justify-between items-center self-stretch group_12">
        <text class="text_8">更换头像</text>
        <image
          class="image_9"
          src="/static/gh/13.png"
        />
      </view>
      <view class="mt-18 flex-col self-start group_13">
        <view class="flex-row justify-center items-center self-stretch">
          <view class="flex-col justify-start items-center relative group_14">
            <image
              class="image_11"
              src="/static/gh/14.png"
            />
            <view class="flex-col justify-start image-wrapper_3 pos_6">
              <image
                class="image_12"
                src="/static/gh/15.png"
              />
            </view>
          </view>
          <view class="ml-18 flex-col justify-start section_6">
            <view class="flex-col justify-start items-center image-wrapper_2">
              <image
                class="image_10"
                src="/static/gh/16.png"
              />
            </view>
          </view>
          <view class="ml-18 flex-col justify-start items-center relative group_14">
            <image
              class="image_11"
              src="/static/gh/17.png"
            />
            <view class="flex-col justify-start items-end image-wrapper_4 pos_7">
              <image
                class="image_13"
                src="/static/gh/18.png"
              />
            </view>
          </view>
        </view>
        <view class="mt-24 flex-col justify-start self-center section_7">
          <view class="flex-col justify-start relative section_8">
            <view class="section_9"></view>
            <text class="text_9 pos_8">确认更换</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      userid: '',
      avatar: '',
      avatarList: '',

    };
  }
}
</script>

<style lang="scss" scoped>.ml-5 {
  margin-left: 10rpx;
}
.mt-13 {
  margin-top: 26rpx;
}
.mt-37 {
  margin-top: 74rpx;
}
.ml-3 {
  margin-left: 6rpx;
}
.page {
  padding-bottom: 528rpx;
  background-color: #ffffff;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.group {
  height: 1096rpx;
}
.section {
  padding: 24rpx 32rpx 140rpx;
  background-image: linear-gradient(180deg, #fff8c7 0%, #fff9c800 97.7%);
}
.group_2 {
  padding-left: 8rpx;
}
.text-wrapper {
  padding: 8rpx 0;
  border-radius: 48rpx;
  width: 108rpx;
  height: 42rpx;
}
.text {
  color: #000000;
  font-size: 30rpx;
  font-family: Alibaba PuHuiTi 2;
  line-height: 21.44rpx;
}
.image {
  width: 34rpx;
  height: 22rpx;
}
.image_2 {
  width: 30rpx;
  height: 22rpx;
}
.image_3 {
  width: 48rpx;
  height: 22rpx;
}
.image_4 {
  border-radius: 50%;
  width: 52rpx;
  height: 52rpx;
}
.group_3 {
  margin-top: -102rpx;
  padding: 0 32rpx;
  height: 904rpx;
}
.group_4 {
  height: 448rpx;
}
.image-wrapper {
  padding-top: 6rpx;
  background-image: url('/static/gh/19.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 192rpx;
}
.image_5 {
  width: 188rpx;
  height: 188rpx;
}
.text_2 {
  color: #666666;
  font-size: 24rpx;
  font-family: Source Han Sans SC;
  line-height: 22.32rpx;
}
.group_5 {
  margin-top: -38rpx;
}
.group_6 {
  width: 126.1rpx;
}
.font {
  font-size: 28rpx;
  font-family: Source Han Sans SC;
  line-height: 25.76rpx;
  color: #333333;
}
.text_3 {
  line-height: 25.74rpx;
}
.image_6 {
  width: 48rpx;
  height: 48rpx;
}
.font_2 {
  font-size: 28rpx;
  font-family: Source Han Sans SC;
  line-height: 25.76rpx;
  color: #999999;
}
.text_4 {
  line-height: 25.96rpx;
}
.image_8 {
  opacity: 0.38;
  width: 91.7333vw;
  height: 1.0667vw;
}
.pos_2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 64rpx;
}
.group_7 {
  margin-top: -38rpx;
  height: 494rpx;
}
.group_8 {
  width: 123.52rpx;
}
.text_5 {
  line-height: 25.46rpx;
}
.font_3 {
  font-size: 28rpx;
  font-family: Source Han Sans SC;
  line-height: 21.26rpx;
  color: #999999;
}
.pos_3 {
  position: absolute;
  left: 0;
  right: 0;
  top: 65rpx;
}
.group_9 {
  margin-top: -38rpx;
}
.group_10 {
  margin-top: 4rpx;
  width: 96.82rpx;
}
.text_6 {
  line-height: 20.52rpx;
}
.image_7 {
  width: 28rpx;
  height: 28rpx;
}
.pos_4 {
  position: absolute;
  left: 0;
  right: 0;
  top: 64rpx;
}
.section_3 {
  margin-top: 24rpx;
  padding: 32rpx 28rpx 116rpx;
  background-color: #f8f8f8;
  border-radius: 24rpx;
}
.section_4 {
  flex: 1 1 194rpx;
  background-color: #ffffff;
  border-radius: 48rpx;
  height: 64rpx;
  border-left: solid 1rpx #cccccc;
  border-right: solid 1rpx #cccccc;
  border-top: solid 1rpx #cccccc;
  border-bottom: solid 1rpx #cccccc;
}
.group_11 {
  width: 617.32rpx;
}
.pos_5 {
  position: absolute;
  right: 0;
  top: 111rpx;
}
.text_7 {
  line-height: 25.88rpx;
}
.section_2 {
  padding-top: 934rpx;
  background-color: #00000099;
}
.pos {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.section_5 {
  padding: 32rpx 0 108rpx;
  background-color: #ffffff;
  border-radius: 32rpx 32rpx 0 0;
}
.group_12 {
  margin: 0 40rpx;
}
.text_8 {
  color: #333333;
  font-size: 32rpx;
  font-family: Source Han Sans SC;
  font-weight: 700;
  line-height: 30.08rpx;
  text-transform: uppercase;
}
.image_9 {
  width: 40rpx;
  height: 40rpx;
}
.group_13 {
  margin-left: -52rpx;
  width: 856rpx;
}
.image_11 {
  border-radius: 34rpx;
  width: 240rpx;
  height: 272rpx;
}
.image-wrapper_3 {
  padding: 24rpx 0;
  background-color: #ffffff;
  border-radius: 34rpx;
  width: 236rpx;
}
.pos_6 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.image_12 {
  margin-right: 16rpx;
  width: 220rpx;
  height: 220rpx;
}
.group_14 {
  opacity: 0.5;
  width: 240rpx;
  height: 272rpx;
}
.section_6 {
  padding: 2rpx 0;
  border-radius: 34rpx;
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=574575c37c8b077695da1f1ccb6c7435.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 304rpx;
  height: 320rpx;
}
.image-wrapper_2 {
  padding: 12rpx 0;
  background-color: #ffffff;
  border-radius: 34rpx;
  width: 300rpx;
}
.image_10 {
  border-radius: 20rpx;
  width: 292rpx;
  height: 292rpx;
}
.image-wrapper_4 {
  padding: 32rpx 0;
  background-color: #ffffff;
  border-radius: 34rpx;
  width: 236rpx;
}
.pos_7 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.image_13 {
  width: 204rpx;
  height: 204rpx;
}
.section_7 {
  padding: 4rpx 0;
  border-radius: 48rpx;
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=ab93bb03222801215ec7d9fc7f04356c.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 568rpx;
}
.section_8 {
  background-color: #ffe944;
  border-radius: 74rpx;
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=1fc8939d99224cdce953f6f6eb4f66a3.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 566rpx;
}
.section_9 {
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=1fc8939d99224cdce953f6f6eb4f66a3.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 100rpx;
}
.text_9 {
  color: #333333;
  font-size: 36rpx;
  font-family: Source Han Sans SC;
  font-weight: 700;
  line-height: 33.92rpx;
}
.pos_8 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}</style>
    
      